<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Joo测试</title>
<style type="text/css">
#pbox,#divContext{padding:20px;}
h3{	font-size:12px;	font-weight:bold;color:#999;}
textArea{width:100%;height:80px;border:none;border:none;border:1px solid none;}
.panel{	border:1px solid #69F;	padding:0;	overflow-x:hidden;}
.panel button{float:left;}
#optionPanel{text-align:left;height:auto;padding:10px;}
#divContext{
	
}

#box1,#box2,#box3,#box1 div,#box2 span{
	border:1px solid #CCC;
	padding:5px;
}

.abc{
	border:1px solid #CCC;
	background:#9C6;
	padding:5px;
}

</style>

<script type="text/javascript" src="Selector.js"></script>


<script type="text/javascript">

function init(){
	
 
	Joo("#box2 span").setStyle("background","#cc99cc").setStyle("border","2px solid #000");   
   
	var obj = Joo("#box1");
	obj.html("aasdfasdfsdf");
	
	Joo(".xyz").css("background","#ee66ee")
	
	var tdsAll = Joo("table tr td").setStyle("background","#ccc");	

	obj.setStyle("background","#cc99cc");
	
	Joo(Joo(Joo("#box1"))).setStyle("padding","10px");
 
 	var tds = Joo("  #table1   tr   td");
	for(var i=0;i<tds.length;i++){
	 	Joo(tds.getItem(i)).html("<strong>"+i+"</strong>");
	}
		
	Joo(obj.getItem()).html("ffffffffff");	
	Joo(obj).html("hhhhhhhhh");
 
	Joo("#table100 tr td").setStyle("padding","100px");   //匹配不到测试
	
	Joo("#table2").setStyle("width","100px");
	Joo("#table2 tr td").html("fff").setStyle("color","#2200cc");
	
	Joo("#table3 tr td div").setStyle("border","1px solid #000").setStyle("margin","5px");
	
	Joo("#table3 tr td .mydiv3 ul li ul li").setStyle("color","#ff0000");  // sub Item
	
	
	Joo("  @input1  ").css("border","2px solid #000").val("This is a Input");  //重名匹配
	Joo("   div   @input1  ").css("background","#55eecc").attr("disabled","disabled");
	
}


</script>

</head>
<body onload="init()">
 
<div id="box1"> box1
	<div id="b">b</div>
    <div class="clsbox">class=clsbox</div>
</div>

<div id="box2"> box2
	<span>s1</span>
    <span>s2</span>
</div>
 
<div id="box3"> box3
	<b class="abc" id="abc1"><span class="xyz">s1</span></b>
    <span class="abc" id="abc2"  >s2</span>
    <div class="abc" id="abc3">s3</div>
</div>

<table id="table1" width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td id="td1">&nbsp;</td>
  </tr>
  <tr>
    <td id="td2">&nbsp;</td>
  </tr>
  <tr>
    <td id="td3">&nbsp;</td>
  </tr>
  <tr>
    <td id="td4">&nbsp;</td>
  </tr>
  <tr>
    <td id="td5">&nbsp;</td>
  </tr>
</table>


<table id="table2" width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

<span id="myinputs" style="padding:10px;">
    <input name="input1" type="text" value="my input1" />
    <input name="input2" type="text" value="my input2" />
    <input name="input3" type="text" value="my input3" />
    <input name="button1" type="button" value="my button1" />
</span>

<div id="myinputs2" style="padding:10px;">
    <input name="input1" type="text" value="my input1" />
    <input name="input2" type="text" value="my input2" />
    <input name="input3" type="text" value="my input3" />
    <input name="button1" type="button" value="my button1" />
</div>


<table id="table3" width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>---</td>
  </tr>
  <tr>
    <td class="mytd3">
    	<div class="abc">this is a div</div>
        <div class="abc xyz">this is a div</div>
        <div class="abc">this is a div</div>
        <div class="mydiv3">
        	<ul>
            	<li>item1
                </li>
                <li>item2
                </li>
                <li>item3
                </li>
                <li>item4
                </li>
                <li>
                	<ul>
                    	<li>subItem1</li>
                        <li>subItem1</li>
                        <li>subItem1</li>
                        <li>subItem1</li>
                        <li>subItem1</li>
                    </ul>
                </li>
                <li>item6
                </li>
            </ul> 
        </div>
        <div>this is a div</div>
        
    </td>
  </tr>
  <tr>
    <td class="mytd3">---</td>
  </tr>
</table>






</body>
</html>
